doctype xml
include _lib/common

+media('screen', 1280, 720, { 'data-main-input-device': 'keyboard', 'data-info-panel-position': 'bottom' })

  defs
    +all-note-area(id='note-area')

  // note panel (Left)
  #{'if'}(key='p1_placement' value='left')
    group
      animation
        keyframe(t='0.25' x='-361')
        keyframe(t='0.6' x='0' ease='quadOut')
      sprite(image='NotePanel/Left.png' x='0' y='0')
      group(x='34' y='0')
        use(def='note-area')

  // note panel (Center)
  #{'if'}(key='p1_placement' value='center')
    group(x='455')
      animation
        keyframe(t='0.25' alpha='0')
        keyframe(t='0.6' alpha='1' ease='quadOut')
      sprite(image='NotePanel/Middle.png' x='0' y='0')
      group(x='42' y='0')
        use(def='note-area')

  // note panel (Right)
  #{'if'}(key='p1_placement' value='right')
    group
      animation
        keyframe(t='0.25' x='1280')
        keyframe(t='0.6' x='919' ease='quadOut')
      sprite(image='NotePanel/Right.png' x='0' y='0')
      group(x='42' y='0')
        use(def='note-area')
        
  // info panel
  group(y='616')
    animation
      keyframe(t='0' y='720')
      keyframe(t='0.3' y='616' ease='quadOut')
    sprite(image='InfoPanel/Background.png')
    sprite(image='InfoPanel/Template.png' y='1')
    text(x='176' y='22' text='%s' data='p1_score' font='ScoreNumber' font-src='Fonts/ScoreNumber.fnt' align='right')
    text(x='636' y='22' text='%s' data='p1_bpm' font='BPMNumber' font-src='Fonts/BPMNumber.fnt' align='center')
    text(x='824' y='33' alpha='0.8' text='%s' data='song_title' font='bold 16px Roboto' fill='white' align='left')
    text(x='824' y='55' alpha='0.6' text='%s' data='song_artist' font='13px Roboto' fill='white' align='left')
    text(x='824' y='70' alpha='0.6' text='%s' data='song_time' font='13px Roboto' fill='white' align='left')
    text(x='260' y='29' text='%s' data='p1_stat_1' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='260' y='47' text='%s' data='p1_stat_2' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='260' y='65' text='%s' data='p1_stat_3' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='387' y='29' text='%s' data='p1_stat_4' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='387' y='47' text='%s' data='p1_stat_missed' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='387' y='65' text='%s' data='p1_stat_acc' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='1160' y='22' text='%s' data='p1_speed' font='ScoreNumber' font-src='Fonts/ScoreNumber.fnt' align='left')

  // tutorial
  +tutorial(width=1280)

+media('touch', 768, 928, { 'data-main-input-device': 'touch', 'data-info-panel-position': 'bottom' })

  - var width = 768
  - var height = 928
  
  defs
    group(id='dxbuttons')
      mixin button(i, row, n)
        - var buttonWidth = 150
        - var buttonHeight = 132
        - var xbase = width / 2 - buttonWidth / 2
        - var ybase = 20
        - var spacing = 8
        - var x = xbase + (buttonWidth + spacing) / 2 * i
        - var y = ybase + row * (buttonHeight + spacing)
        group(x=x y=y)
          sprite(image='Touch/Buttons/Normal.png' x='0' y='0' ref='p1_' + n)
          block
          sprite(image='Touch/Buttons/Active.png' x='-1' y='-1' alpha='p1_' + n + '_active')
      +button(-3, 1, 1)
        text(x='75' y='32' text='Score' align='center'
              font='InfoSmall' font-src='Fonts/InfoSmall.fnt')
        text(x='75' y='56' text='%s' align='center' data='p1_score'
              font='ScoreNumberSmall' font-src='Fonts/ScoreNumberSmall.fnt')
      +button(-2, 0, 2)
      +button(-1, 1, 3)
        text(x='75' y='32' text='Accuracy' align='center'
              font='InfoSmall' font-src='Fonts/InfoSmall.fnt')
        text(x='75' y='56' text='%s' align='center' data='p1_stat_acc'
              font='ScoreNumberSmall' font-src='Fonts/ScoreNumberSmall.fnt')
      +button( 0, 0, 4)
      +button( 1, 1, 5)
        text(x='75' y='32' text='Time' align='center'
              font='InfoSmall' font-src='Fonts/InfoSmall.fnt')
        text(x='75' y='56' text='%s' align='center' data='song_time'
              font='ScoreNumberSmall' font-src='Fonts/ScoreNumberSmall.fnt')
      +button( 2, 0, 6)
      +button( 3, 1, 7)
        text(x='75' y='32' text='Speed' align='center'
              font='InfoSmall' font-src='Fonts/InfoSmall.fnt')
        text(x='75' y='56' text='%s' align='center' data='p1_speed'
              font='ScoreNumberSmall' font-src='Fonts/ScoreNumberSmall.fnt')

  // note panel
  group(x=(width / 2 - 185))
    animation
      keyframe(t='0.25' alpha='0')
      keyframe(t='0.6' alpha='1' ease='quadOut')
    sprite(image='Touch/NotePanel.png' x='0' y='0')
    group(x='42' y='0')
      +all-note-area

  // button panel
  group(y=(height - 311))
    animation
      keyframe(t='0' y=(height))
      keyframe(t='0.3' y=(height - 311) ease='quadOut')
    sprite(image='Touch/ButtonPanel.png')
    #{'if'}(key='p1_scratch' value='left')
      group
        group(x=styles.scratch.width / 2): use(def='dxbuttons')
        sprite(image='Touch/Scratch/ScratchAreaL.png' x=0 y=8 ref='p1_SC')
        sprite(image='Touch/Scratch/ScratchGlowL.png' x=0 y=6 alpha='p1_SC_active')
    #{'if'}(key='p1_scratch' value='right')
      group
        group(x=-styles.scratch.width / 2): use(def='dxbuttons')
        sprite(image='Touch/Scratch/ScratchAreaR.png' x=674 y=8 ref='p1_SC')
        sprite(image='Touch/Scratch/ScratchGlowR.png' x=674 y=6 alpha='p1_SC_active')
    #{'if'}(key='p1_scratch' value='off')
      group
        mixin button(col, n)
          - var x = 27 + col * 102
          - var y = 32
          group(x=x y=y)
            sprite(image='Touch/Buttons/KNormal.png' x='0' y='0' ref='p1_' + n)
            block
            sprite(image='Touch/Buttons/KActive.png' x='-1' y='-1' alpha='p1_' + n + '_active')
        +button(0, 1)
        +button(1, 2)
        +button(2, 3)
        +button(4, 5)
        +button(5, 6)
        +button(6, 7)
        group(x=147 y=180)
          sprite(image='Touch/Buttons/SNormal.png' x='0' y='0' ref='p1_4')
          sprite(image='Touch/Buttons/SActive.png' x='-1' y='-1' alpha='p1_4_active')

  +tutorial(width=768 touch=true)

+media('touch3d', 1280, 720, { 'data-display-mode': 'touch3d', 'data-main-input-device': 'touch', 'data-info-panel-position': 'top' })
  group(y='-12')
    animation
      keyframe(t='0' y='-104')
      keyframe(t='0.3' y='-12' ease='quadOut')
    sprite(image='InfoPanel/Background.png')
    sprite(image='InfoPanel/Template.png' y='1')
    text(x='176' y='22' text='%s' data='p1_score' font='ScoreNumber' font-src='Fonts/ScoreNumber.fnt' align='right')
    text(x='824' y='33' alpha='0.8' text='%s' data='song_title' font='bold 16px Roboto' fill='white' align='left')
    text(x='824' y='55' alpha='0.6' text='%s' data='song_artist' font='13px Roboto' fill='white' align='left')
    text(x='824' y='70' alpha='0.6' text='%s' data='song_time' font='13px Roboto' fill='white' align='left')
    text(x='1160' y='22' text='%s' data='p1_speed' font='ScoreNumber' font-src='Fonts/ScoreNumber.fnt' align='left')
    text(x='1099' y='34' text='%s' data='p1_bpm' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='left')
    text(x='260' y='29' text='%s' data='p1_stat_1' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='260' y='47' text='%s' data='p1_stat_2' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='260' y='65' text='%s' data='p1_stat_3' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='387' y='29' text='%s' data='p1_stat_4' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='387' y='47' text='%s' data='p1_stat_missed' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')
    text(x='387' y='65' text='%s' data='p1_stat_acc' font='StatNumber' font-src='Fonts/StatNumber.fnt' align='right')

  mixin my-note(column, file)
    sprite(image=('Touch3DMode/Highlight' + column + '.png') blend='screen')
      animation
        keyframe(t='0' alpha='0')
      animation(on='p1_' + column + '_down')
        keyframe(t='0' alpha='1')
      animation(on='p1_' + column + '_up')
        keyframe(t='0' alpha='1')
        keyframe(t='0.18' ease='quadOut' alpha='0')
    object(key=('p1_note3d_' + column) pool='24')
      sprite(image=(file) x='x' y='y' anchor-x='0.5' anchor-y='1'
        scale-x='width / 26.5' scale-y='width / 28')
    group(y='689' x=(560 * ((column - 0.5) / 7 * 2 - 1) + 1280 / 2))
      animation
        keyframe(t='0' alpha='0' scale-x='2' scale-y='2')
      animation(on='p1_' + column + '_explode')
        keyframe(t='0' alpha='1' scale-x='4' scale-y='2')
        keyframe(t='0.18' alpha='0' scale-x='4' scale-y='4')
      sprite(image='Explosion/NoteExplosion.png' x='-25' y='-25' blend='screen')

  group
    animation
      keyframe(t='0.25' alpha='0')
      keyframe(t='0.6' alpha='1' ease='quadOut')
    sprite(image='Touch3DMode/Lane.png' x='0' y='0')
    sprite(image='Touch3DMode/Flash.png' x='0' y='0' blend='screen' alpha='1 - (p1_beat % 1)')

    object(key=('p1_barlines3d') pool='24')
      sprite(image='NoteArea/Bar.png' x='x' y='y' scale-x='width / 282' scale-y='width / 282')

    +my-note(1, 'Touch3DMode/NoteWhite.png')
    +my-note(2, 'Touch3DMode/NoteBlue.png')
    +my-note(3, 'Touch3DMode/NoteWhite.png')
    +my-note(4, 'Touch3DMode/NoteGreen.png')
    +my-note(5, 'Touch3DMode/NoteWhite.png')
    +my-note(6, 'Touch3DMode/NoteBlue.png')
    +my-note(7, 'Touch3DMode/NoteWhite.png')

  group(x='498')
    +press-start
    +hope-gauge
    group(y='400')
      +judgments
    group(y='440')
      +judgment-deviations

  // tutorial
  +tutorial(width=1280)
